<script setup>
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import ArticlePopup from "@/views/articles/ArticlePopup.vue";
import {articles} from "@/views/articles/mockArticles.ts";

const horizontalRef = ref({});

const handleWheel = (event) => {
  event.preventDefault();
  let currentScrollLeft = horizontalRef.value.scrollLeft;
  const delta = event.deltaY; // 获取滚轮移动的距离
  horizontalRef.value.scrollLeft = currentScrollLeft + delta * 2;
}
const state = ref({
  tab: 0,
  showArticlePopup: false,
  currentArticle: {},
  articleList: [],
})
const showArticle = (item) => {
  state.value.showArticlePopup = true
  state.value.currentArticle = articles.find(i => i.id === item.id);
  history.pushState({}, '');
}
onMounted(() => {
  window.addEventListener('popstate', handlePopState);
  watch(() => state.value.showArticlePopup, (newVal) => {
    document.body.style.overflow = newVal ? 'hidden' : '';
  });
  state.value.articleList = articles.slice(0, 4)
});

onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
const handlePopState = (event) => {
  if (state.value.showArticlePopup) {
    state.value.showArticlePopup = false;
    document.body.style.overflow = '';
  }
};
const changeTab = (index) => {
  state.value.tab = index;
  if (index === 0) {
    state.value.articleList = articles.slice(0, 4)
  } else {
    state.value.articleList = articles.slice(4)
  }
}
defineExpose({
  showArticle
})
</script>

<template>
  <view id="aaa" class="column container">
    <view class="row font36">
      <view class="column" style="margin-right: 6%; cursor: pointer; align-items: center;" @click="changeTab(0)">
        <view>行业资讯</view>
        <view class="indicator" :class="{active: state.tab===0}"/>
      </view>
      <view class="column" style="cursor: pointer; align-items: center;" @click="changeTab(1)">
        <view>知识分享</view>
        <view class="indicator" :class="{active: state.tab===1}"/>
      </view>
    </view>
    <view ref="horizontalRef" class="row top4 scroll-content" @wheel="handleWheel">
      <view class="column item" v-for="(item, i) in state.articleList" :key="i" @click="showArticle(item)">
        <view class="images">
          <img :src="item.album" alt=""/>
        </view>
        <view class="top6 font24">每周项目精选 | {{ item.shortTitle }}</view>
        <view class="more font24">了解更多</view>
      </view>
    </view>
  </view>
  <ArticlePopup :show="state.showArticlePopup"
                :article="state.currentArticle"
                @onClose="state.showArticlePopup = false"/>
</template>

<style scoped>
.container {
  height: calc(100vw * 770 / 1920);
  margin-top: 8%;

  &.noScroll {
    overflow-y: hidden;
  }

  .indicator {
    width: 50%;
    margin-top: 10%;
    border-top: solid 2px transparent;

    &.active {
      border-top: solid 2px #00c6f7;
    }
  }

  .scroll-content {
    overflow-x: auto;
    width: calc(100vw - 160px);

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: whitesmoke; /* 滑块颜色 */
      border-radius: 6px; /* 滑块圆角 */
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: white;
    }

    .item {
      min-width: calc((100vw - 320px) / 3);
      margin-right: 20px;
      cursor: pointer;

      .images {
        height: 15em;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .more {
        width: 26%;
        color: white;
        border: solid 1px #979797;
        margin-top: 7%;
        padding: 1% 2%;
        cursor: pointer;
        border-radius: 0.3em;
        text-decoration: none;
      }
    }
  }
}
</style>